<template>
	<div>
		<div class="headercon">
			<el-form class="cardboxList_box" ref="form" :model="form" label-width="100px">
				<el-row :gutter="20" class="mb8">
					<!-- <el-col :span="4">
						<div class="grid-content bg-purple">
							<el-form-item label="年">
								<el-date-picker
								      v-model="form.year"
								      type="year"
								      placeholder="选择日期时间">
								    </el-date-picker>
							</el-form-item>
						</div>
					</el-col> -->
					<el-col :span="6" style="width: 400px;">
						<div class="grid-content bg-purple">
							<el-form-item label="日期">
								<el-date-picker @change="changeSearchDate" v-model="selectDate" type="month"
									placeholder="选择日期时间">
								</el-date-picker>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="6" style="width: 400px;">
						<div class="grid-content bg-purple">
							<el-form-item label="客户名称">
								<el-select v-model="form.name" clearable placeholder="请选择" clearable>
									<el-option v-for="item in userlist" :key="item.username" :label="item.username"
										:value="item.username">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
					</el-col>
					<el-col :span="3">
						<div class="grid-content bg-purple" style="margin-top: -10px;">
							<el-button type="primary" icon="el-icon-search" @click="getList">搜索</el-button>
						</div>
					</el-col>
					<!-- <el-col :span="1.5">
						<div class="grid-content bg-purple" style="margin-top: -10px;">
							<el-button type="primary" icon="el-icon-search" @click="restSearch">重置</el-button>
						</div>
					</el-col> -->
					<!-- <el-col :span="1.5">
						<div class="grid-content bg-purple" style="margin-top: -10px;">
							<el-button type="primary" icon="el-icon-search"><a style="color: white;" :href="['http://47.96.107.90/api/export_excel/']">导出</a></el-button>
						</div>
					</el-col> -->
					<!-- <el-col :span="1.5">
						<div class="grid-content bg-purple" style="margin-top: -10px;">
							<el-button type="primary" @click="showdialogVisible">新增</el-button>
						</div>
					</el-col> -->
				</el-row>
			</el-form>
			<!-- <el-button type="primary" @click="showdialogVisible">新增</el-button> -->
		</div>
		<el-table :data="tableData" style="width: 100%" border>
			<el-table-column prop="date" label="日期" align="center">
			</el-table-column>
			<el-table-column prop="order_count" label="订单数量" align="center">
			</el-table-column>
			<el-table-column prop="sum_net_receipts" label="实收金额" align="center"></el-table-column>
			<el-table-column prop="sum_expenditure" label="已付款给公司的金额" align="center"></el-table-column>
			<el-table-column prop="sum_postage" label="资费金额" align="center"></el-table-column>
			<el-table-column prop="sum_income" label="已向客户收取得金额" align="center"></el-table-column>
			<!-- <el-table-column fixed="right" label="操作" width="160">
				<template slot-scope="scope">
				   <el-button @click="templateClick(scope.row)" type="text" size="small">模版数据</el-button>
					<el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
				     <el-button class="delete" type="text" @click="deleteThis(scope.row)" size="small">删除</el-button>

				</template>
			</el-table-column> -->
		</el-table>
		<el-table :data="summarylist" border :show-header="false" :span-method="arraySpanMethod">
			<el-table-column prop="name" label="合计" align="center">
			</el-table-column>
			<el-table-column prop="all_order_count" label="总订单数量" align="center">
			</el-table-column>
			<el-table-column prop="all_net_receipts" label="实收总金额" align="center">
			</el-table-column>
			<el-table-column prop="all_postage" label="资费总金额" align="center">
			</el-table-column>
			<el-table-column prop="all_expenditure" label="已付款给公司总金额" align="center">
			</el-table-column>
			<el-table-column prop="all_income" label="已向客户收取得总金额" align="center">
			</el-table-column>
		</el-table>
		<!-- <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
			:page-sizes="[5, 10, 20, 40]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
			:total="pageTotal">
		</el-pagination> -->
		<el-dialog :title="Texttitle" :visible.sync="dialogVisible">
			<el-form class="cardboxList_box">
				<el-row :gutter="60">
					<el-col :span="12">
						<el-form-item label="姓名">
							<el-input style="width: 150px;" v-model="addform.username" type="text"></el-input>
						</el-form-item>
					</el-col>

				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm_add" size="small">确定</el-button>
				<el-button @click="logCancel_1" size="small">取消</el-button>
			</div>
		</el-dialog>


		<!-- 模板数据列表（新增） -->
		<el-dialog :title="templateLog" :visible.sync="templateVisible_add" width="800px">
			<div class="box">
				<el-form class="cardboxList_box">
					<el-row :gutter="60">
						<el-col :span="12">
							<el-form-item label="省份">
								<el-input style="width: 150px;" v-model="addform_1.province" type="text"></el-input>
							</el-form-item>
						</el-col>

					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button type="primary" @click="submitForm_templateAdd" size="small">确定</el-button>
					<el-button @click="logCancel_2" size="small">取消</el-button>
				</div>
			</div>
		</el-dialog>


	</div>
</template>

<script>
	import Schart from 'vue-schart';
	import bus from '../common/bus';
	import {

		uploadImg,
		bookkeepingviewList,
		gettoday,
		get_username
	} from '../../api/index';
	export default {
		name: 'dashboard',
		data() {
			return {
				userlist:[],
				summarylist: [],
				selectDate: '',
				methodSelect: [{
						value: '首重加续重'
					},
					{
						value: '区间计重'
					}
				],
				templateDetailFlagtype: 1,
				templateFlagtype: 1,
				templateLog: '新增',
				templatedetailLog: '新增',
				templateVisibledetail_add_1: false,
				templateVisibledetail_add: false,
				templateVisible_add: false,
				templateVisible: false,
				showViewer: false, // 显示查看器
				ruleForm: '',
				hideUp: '',
				nextProjectForm: {
					publicWelfareUrl: "",
				},
				Texttitle: "新增",
				page: 1,
				page_1: 1,
				form: {
					year: '',
					month: '',
					name:''
				},

				addform: {
					username: '',

				},
				addform_1: {
					province: '',
					user: '',
				},
				childrow: '',
				childtypeflag: 1, //  1新增 2修改
				currentPage: 1, //初始页
				pagesize: 10, //  每页的数据
				pageTotal: '',

				currentPage_1: 1, //初始页
				pagesize_1: 10, //    每页的数据
				pageTotal_1: '',

				currentPage_2: 1, //初始页
				pagesize_2: 10, //    每页的数据
				pageTotal_2: '',

				dialogVisible: false,
				tableData: [],
				tableData_1: [],
				tableData_2: [],

				formitnanme: '',
				flagtype: 1,
				user_id: '',
				user_id_1: '',
				user_id_2: '',
				//详情
				dialogVisible_1: false,
				detailDataLog: '',
				detailrow: '',

				//添加记录
				addLogVisible: false,
				logInfo: '',
				value2: '',
				pickerOptions: {
					shortcuts: [{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					}, {
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					}, {
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}]
				},
				templateUser_id: '',
			}
		},
		components: {
			Schart
		},
		computed: {
			role() {
				return this.name === 'admin' ? '超级管理员' : '普通用户';
			}
		},
		created() {
			const loading = this.$loading({
			  lock: true,
			  text: 'Loading',
			  spinner: 'el-icon-loading',
			  background: 'rgba(0, 0, 0, 0.7)'
			});
			this.getuserList()
			this.gettodayNow()
			// this.form.user_id=window.localStorage.getItem('user_id')
		},
		// activated() {
		//     this.handleListener();
		// },
		// deactivated() {
		//     window.removeEventListener('resize', this.renderChart);
		//     bus.$off('collapse', this.handleBus);
		// },
		methods: {
			getuserList() {
				let that = this
				let query;
				query = {}
				console.log(query)
				get_username(query).then(res => {
					
					that.userlist = res.results;
					console.log("用户", res.results);
				});
			},
			gettodayNow() {
				let that = this
				let query;
				query = {}
				gettoday(query).then(res => {
				 	console.log("当前年月", res);
					this.selectDate = new Date(res.year+'-'+res.month+'-'+res.day);
					console.log(this.formatDate(this.selectDate).split('-'))
					this.form.year = this.formatDate(this.selectDate).split('-')[0]
					this.form.month = this.formatDate(this.selectDate).split('-')[1]
				    this.getList() 
				});
			},
			
			arraySpanMethod({
				row,
				column,
				rowIndex,
				columnIndex
			}) {
				if (rowIndex === 1) {
					if (columnIndex === 2) {
						return [1, 2];
					} else if (columnIndex === 3) {
						return [0, 1];
					}else if (columnIndex === 4) {		
						return [2, 0];
					}else if (columnIndex === 5) {
					
						return [1, 2];
					}					
				}else if(rowIndex === 2){
					if (columnIndex === 3) {
						return [1, 2];
					} else if (columnIndex === 3) {
						return [0, 1];
					}
				}
				
			},
			changeSearchDate(e) {

				console.log(this.formatDate(e).split('-'))
				this.form.year= this.formatDate(e).split('-')[0]
				this.form.month= this.formatDate(e).split('-')[1]
				this.getList()
				//  console.log(this.form)	
			},
			//数据模板
			templateClick(row) {
				console.log(row)
				this.templateUser_id = row.user_id
				this.addform_1.user = row.user_id
				this.templateList(row.user_id)
				this.templateVisible = true
			},
			//数据模板列表
			templateList(user_id) {
				let that = this
				that.form1.user_id = user_id
				let query;
				query = this.form1
				console.log(query)
				templateviewList(query).then(res => {
					console.log("模板列表", res);
					that.tableData_1 = res.results;
					that.pageTotal_1 = res.count
				});
			},
			//数据模板(新增)
			showTemplatePop() {
				this.templateVisible_add = true
				this.templateLog = '新增'
				this.templateFlagtype = 1
				this.addform_1.province = undefined
			},
			//数据模板(编辑)
			templatehandleClick(row) {
				console.log("编辑", row)
				this.templateLog = '编辑'
				this.templateFlagtype = 2
				this.templateVisible_add = true
				this.addform_1 = row
				this.user_id_1 = row.template_id
			},
			//新增模板
			submitForm_templateAdd() {
				console.log("新增模板", this.addform_1)
				if (this.addform_1.province == '' || this.addform_1.province == undefined) {
					this.$message.error('请输入省份');
				} else {

					if (this.templateFlagtype == 1) {
						templateviewAdd(this.addform_1).then(res => {
							console.log("新增", res)
							this.templateVisible_add = false
							this.$message({
								message: '新增成功！',
								type: 'success'
							});
							this.templateList(this.templateUser_id)
							// this.tableData = res.list;
							// this.pageTotal = res.pageTotal || 50;
						});
					} else {
						templateviewEdict(this.user_id_1, this.addform_1).then(res => {
							console.log("修改", res)
							this.templateVisible_add = false
							this.$message({
								message: '修改成功！',
								type: 'success'
							});
							this.templateList(this.templateUser_id)
							// this.tableData = res.list;
							// this.pageTotal = res.pageTotal || 50;
						});
					}

				}
			},
			//删除模板
			templatedeleteThis(row) {
				let that = this
				that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let query = {
						"template_id": row.template_id,
					}
					templateviewDelete(row.template_id, query).then(res => {
						that.$message({
							message: '删除成功！',
							type: 'success'
						});
						that.templateList(this.templateUser_id)
						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});
				}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//模板详情
			templateDetailClick(row) {
				console.log('模板详情参数', row)
				this.templateVisibledetail_add = true
				this.form2.user_id = this.templateUser_id
				this.form2.template_id = row.template_id
				let that = this
				console.log(that.form2)
				templateviewDetailList(that.form2).then(res => {
					console.log("模板详情", res);
					that.tableData_2 = res.results;
					that.pageTotal_2 = res.count
				});
			},
			//模板详情(新增)
			showTemplateDetailPop() {
				this.templateVisibledetail_add_1 = true
				this.templatedetailLog = '新增'
				this.templateDetailFlagtype = 1
				// this.form2.user_id=this.templateUser_id
				// this.form2.template_id=row.template_id
				this.addform_2 = {
					method: undefined,
					weight_start: undefined,
					weight_end: undefined,
					date_start: undefined,
					date_end: undefined,
					first_weight: undefined,
					continued_weight: undefined,
					template: this.form2.template_id,
					user: this.form2.user_id
				}
			},
			//模板详情(编辑)
			showTemplateDetailEdict(row) {
				this.templateVisibledetail_add_1 = true
				this.templatedetailLog = '编辑'
				this.templateDetailFlagtype = 2
				this.user_id_2 = row.template_info_id
				this.addform_2 = row
			},
			//新增模板详情
			submitForm_templateDetailAdd() {
				let that = this
				console.log("新增模板详情", this.addform_2)
				// if (this.addform_1.province == ''||this.addform_1.province == undefined) {
				// 	this.$message.error('请输入省份');
				// } else {
				that.addform_2.date_start = that.formatDate(that.addform_2.date_start)
				that.addform_2.date_end = that.formatDate(that.addform_2.date_end)
				if (that.templateDetailFlagtype == 1) {
					templateviewDetailAdd(that.addform_2).then(res => {
						console.log("新增", res)
						that.templateVisibledetail_add_1 = false
						that.$message({
							message: '新增成功！',
							type: 'success'
						});
						templateviewDetailList(that.form2).then(res => {
							console.log("模板详情", res);
							that.tableData_2 = res.results;
							that.pageTotal_2 = res.count
						});
						// this.templateList(this.templateUser_id)
						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});
				} else {
					templateviewDetailEdict(that.user_id_2, that.addform_2).then(res => {
						console.log("修改", res)
						that.templateVisibledetail_add_1 = false
						that.$message({
							message: '修改成功！',
							type: 'success'
						});
						templateviewDetailList(that.form2).then(res => {
							console.log("模板详情", res);
							that.tableData_2 = res.results;
							that.pageTotal_2 = res.count
						});
						// this.templateList(this.templateUser_id)
						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});
				}

				//}
			},
			templatedeleteDetailThis(row) {
				let that = this
				that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let query = {
						"template_info_id": row.template_info_id,
					}
					templateviewDetailDelete(row.template_info_id, query).then(res => {
						that.$message({
							message: '删除成功！',
							type: 'success'
						});
						templateviewDetailList(that.form2).then(res => {
							console.log("模板详情", res);
							that.tableData_2 = res.results;
							that.pageTotal_2 = res.count
						});
						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});
				}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},

			//重置
			restSearch() {
				this.form.username = undefined
				this.getList()
			},

			//导出
			exportexelBtn() {
				let query = {}
				exportexel(query).then(res => {
					console.log("导出", res)
				});

			},

			dataSearch() {
				this.formatDate(that.value2)
			},
			//添加记录
			showLogdilog(row, type) {
				this.childtypeflag = type
				this.addLogVisible = true
				if (type == 2) {
					this.childrow = row
					this.addformchild = row
					this.uploadimgurl = row.img
				}

			},

			addLogcancel() {
				this.addLogVisible = false
			},

			//确认添加操作日志
			addLogBtn() {
				let that = this
				let query = this.addformchild
				query.personnel = this.detailrow.personnel_id
				console.log("确认添加操作日志", query)
				console.log(query)
				if (this.childtypeflag == 1) {
					detailAdd(query).then(res => {
						that.addLogVisible = false
						that.$message({
							message: '添加成功！',
							type: 'success'
						});
						that.detailClick(that.detailrow)
					});
				} else {
					detailEdict(query.personnel_logs_id, query).then(res => {
						that.addLogVisible = false
						that.$message({
							message: '修改成功！',
							type: 'success'
						});
						that.detailClick(that.detailrow)
					});
				}

			},


			handleSizeChange: function(size) {
				this.pagesize = size;
				console.log(this.pagesize) //每页下拉显示数据
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage) //点击第几页
				this.page = currentPage
				this.getList()
			},
			handleSizeChange_1: function(size) {
				this.pagesize_1 = size;
				this.form1.size = size
				this.templateList(this.templateUser_id)
			},
			handleCurrentChange_1: function(currentPage) {
				this.currentPage_1 = currentPage;
				console.log(this.currentPage_1) //点击第几页
				this.page_1 = currentPage
				this.form1.page = currentPage
				this.templateList(this.templateUser_id)
			},

			handleSizeChange_2: function(size) {
				this.pagesize_2 = size;
				this.form2.size = size
				this.templateDetailClick()
			},
			handleCurrentChange_2: function(currentPage) {
				this.currentPage_2 = currentPage;
				console.log(this.currentPage_2) //点击第几页
				this.page_2 = currentPage
				this.form2.page = currentPage
				this.templateDetailClick()
			},
			showdialogVisible() {
				this.Texttitle = '新增'
				this.addform.username = ''

				this.user_id = ''
				this.dialogVisible = true
				this.flagtype = 1
			},


			//s删除
			deleteThis(row) {
				let that = this
				that.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let query = {
						"user_id": row.user_id,
					}
					yonghuDelete(row.user_id, query).then(res => {
						that.dialogVisible = false
						that.$message({
							message: '删除成功！',
							type: 'success'
						});
						that.getList()
						// this.tableData = res.list;
						// this.pageTotal = res.pageTotal || 50;
					});
				}).catch(() => {
					that.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			//编辑
			handleClick(row) {
				console.log("编辑", row)
				this.Texttitle = '编辑'
				this.flagtype = 2
				this.dialogVisible = true
				this.addform = row

				this.user_id = row.user_id
				this.secondviewsetclik()
				this.thirdviewsetclik()
			},


			//关闭新增弹窗
			logCancel_1() {
				this.dialogVisible = false
			},
			logCancel_2() {
				this.templateVisible_add = false
			},
			logCancel_3() {
				this.templateVisibledetail_add_1 = false
			},

			//新增用户
			submitForm_add() {
				console.log("新增记录", this.addform)
				if (this.addform.username == '' || this.addform.username == undefined) {
					this.$message.error('请输入姓名');
				} else {

					if (this.flagtype == 1) {
						yonghuAdd(this.addform).then(res => {
							console.log("新增", res)
							this.dialogVisible = false
							this.$message({
								message: '新增成功！',
								type: 'success'
							});
							this.getList()
							// this.tableData = res.list;
							// this.pageTotal = res.pageTotal || 50;
						});
					} else {
						yonghuEdict(this.user_id, this.addform).then(res => {
							console.log("修改", res)
							this.dialogVisible = false
							this.$message({
								message: '修改成功！',
								type: 'success'
							});
							this.getList()
							// this.tableData = res.list;
							// this.pageTotal = res.pageTotal || 50;
						});
					}

				}
			},
			getList() {
				let that = this
				let query;
				query = that.form
				console.log(query)
				bookkeepingviewList(query).then(res => {
					 const loading = this.$loading({
					  lock: true,
					  text: 'Loading',
					  spinner: 'el-icon-loading',
					  background: 'rgba(0, 0, 0, 0.7)'
					});
					console.log("记账", res.summary, that.summarylist);
					that.tableData = res.result;
					res.summary.name = '合计'
					that.summarylist = [res.summary]
					let obj = {
						all_expenditure: '',
						all_income: res.summary.two,
						all_net_receipts:  res.summary.one ,
						all_order_count: res.summary.all_order_count,
						all_postage: '',
						name: '合计'
						// heji_1:res.summary.all_expenditure-res.summary.all_net_receipts,
						// heji_2:res.summary.all_postage-res.summary.all_income,
						// all_order_count:res.summary.all_order_count,
						// name:'合计'
					}
					
					that.summarylist.push(obj)
					console.log(222222222222,obj)
					let obj1 = {
						all_expenditure: '',
						all_income: '',
						all_net_receipts: '',
						all_order_count: res.summary.all_order_count,
						all_postage: res.summary.three,
						name: '合计'
						// allnum:obj.heji_1+obj.heji_2,
						// all_order_count:res.summary.all_order_count,
						// name:'合计'
					}
					that.summarylist.push(obj1)
					
					that.pageTotal = res.count
					loading.close()
				});
			},
			formatTen(num) {
				return num > 9 ? (num + "") : ("0" + num);
			},
			formatDate(date) {
				console.log("时间", date)
				var date = new Date(date)
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				var day = date.getDate();
				var hour = date.getHours();
				var minute = date.getMinutes();
				var second = date.getSeconds();

				return year + "-" + this.formatTen(
					month) // + "-" + this.formatTen(day) //+ " " + this.formatTen(hour) + ":" +
				console.log(333, year + "-" + this.formatTen(month) + "-" + this.formatTen(day))
				// this.formatTen(
				// 	minute) + ":" + this.formatTen(second);
			},
			changeDate() {
				const now = new Date().getTime();
				this.data.forEach((item, index) => {
					const date = new Date(now - (6 - index) * 86400000);
					item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
				});
			}

		}
	};
</script>


<style scoped>
	/deep/ .el-pagination__sizes {
		display: none !important;
	}

	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		line-height: 178px;
		text-align: center;
	}

	.avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	.headercon {
		height: 100px;
	}

	.el-upload {
		width: 100px;
	}

	.el-row {
		margin-bottom: 20px;
	}

	.grid-content {
		display: flex;
		align-items: center;
		height: 100px;
	}

	.grid-cont-right {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #999;
	}

	.grid-num {
		font-size: 30px;
		font-weight: bold;
	}

	.grid-con-icon {
		font-size: 50px;
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		color: #fff;
	}

	.grid-con-1 .grid-con-icon {
		background: rgb(45, 140, 240);
	}

	.grid-con-1 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-2 .grid-con-icon {
		background: rgb(100, 213, 114);
	}

	.grid-con-2 .grid-num {
		color: rgb(45, 140, 240);
	}

	.grid-con-3 .grid-con-icon {
		background: rgb(242, 94, 67);
	}

	.grid-con-3 .grid-num {
		color: rgb(242, 94, 67);
	}

	.user-info {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
		border-bottom: 2px solid #ccc;
		margin-bottom: 20px;
	}

	.user-avator {
		width: 120px;
		height: 120px;
		border-radius: 50%;
	}

	.user-info-cont {
		padding-left: 50px;
		flex: 1;
		font-size: 14px;
		color: #999;
	}

	.user-info-cont div:first-child {
		font-size: 30px;
		color: #222;
	}

	.user-info-list {
		font-size: 14px;
		color: #999;
		line-height: 25px;
	}

	.user-info-list span {
		margin-left: 70px;
	}

	.mgb20 {
		margin-bottom: 20px;
	}

	.todo-item {
		font-size: 14px;
	}

	.todo-item-del {
		text-decoration: line-through;
		color: #999;
	}

	.schart {
		width: 100%;
		height: 300px;
	}

	.delete {
		color: red;
	}

	.dialog-footer {
		text-align: right;
	}
</style>
